<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    var i = 0;

    function App() {
        var j = 0;
    }
    class TabControl extends Component {
        constructor(props) {
            super(props);

            this.state = {
                currentIndex: 0
            }
        }

        render() {
            const { titles } = this.props;
            const { currentIndex } = this.state;

            return (
                <div className="tab-control">
                    {
                        titles.map((item, index) => {
                            return (
                                <div key={item}
                                    className={"tab-item " + (index === currentIndex ? "active" : "")}
                                    onClick={e => this.itemClick(index)}>
                                    <span>{item}</span>
                                </div>
                            )
                        })
                    }
                </div>
            )
        }

        itemClick(index) {
            this.setState({
                currentIndex: index
            })

            const { itemClick } = this.props;
            itemClick(index);
        }
    }
    class App extends Component {
        constructor(props) {
            super(props);

            this.titles = ['新款', '精选', '流行'];

            this.state = {
                currentTitle: "新款",
                currentIndex: 0
            }
        }

        render() {
            const { currentTitle } = this.state;

            return (
                <div>
                    <TabControl itemClick={index => this.itemClick(index)} titles={this.titles} />
                    <h2>{currentTitle}</h2>
                </div>
            )
        }

        itemClick(index) {
            this.setState({
                currentTitle: this.titles[index]
            })
        }
    }

    ReactDOM.render(<APP />, document.getElementById('app'));
</script>

</html>